<template>
<div class="container">
  <!-- <h1>方正证券证券投资顾问业务风险揭示书</h1> -->
  <div class="content" v-html="content"></div>
  <div class="footer">
    <router-link :to="{path:'/ProductDetail',query:{productId:productId}}" class="no-agree">不同意</router-link>
    <!-- <a href="productDetail.html" class="no-agree">不同意</a> -->
    <a href="javascript:;" class="agree" 
    :class="{readed:(count<1)}" 
    @click="agree()">同意签署 <i v-if="count>0">({{count}}s)</i></a>
  </div>

  <Info v-if="postError.isShow" 
  @infoClose="closeDialog" 
  :txt="postError.txt"></Info>

</div>


</template>

<script>
import Api from '@/service';
import Info from '@/components/Info';
export default {
  name: 'RiskAnnounce',
  data () {
    return {
      count: 10,
      content: '',
      productId: this.$route.query.productId,
      postError: {
        txt: '',
        isShow: false
      }
    }
  },
  components: {
    Info
  },
  methods:{
    initRiskAnnounce(){
      let _self = this;
      Api.sm.getRiskAnnounce(_self.productId)
      .then(function(response){
        // console.log(response.data.info)
        if(response.data.status == "success" && response.data.code==200){
          _self.content = response.data.info.riskPageContent;
        }else if(response.data.status == "success" && response.data.code!=200){
          // 弹窗信息 
          _self.postError.txt = response.data.message;
          _self.postError.isShow = true;
        }

      });
    },

    downCount(){
      let self= this;
      let t = setInterval(function(){
        if(self.count<1){
          clearInterval(t);
          return false;
        }
        self.count--;
      },1000);
    },
    
    agree(){
      if(this.count<=0){
        this.$router.push({path:'/RiskMatch',query:{productId:this.productId}});
      }
    },

    closeDialog(){
      this.postError.isShow = false;
    }
  },
  created: function(){
    this.initRiskAnnounce();
    this.downCount();
  }
}
</script>

<style lang="scss" scoped type="text/css">
@import  "../assets/scss/reset";
.container{
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: calculateRem(20px) calculateRem(16px) calculateRem(58px);
  >h1{
    width: 100%;
    height: auto;
    line-height: calculateRem(30px);
    font-size: calculateRem(22px);
    color: black;
    margin: 0 0 calculateRem(10px);
  }
  .content{
    color: #333;
    font-size: calculateRem(17px);
    line-height: calculateRem(24px);
    p{
      margin: calculateRem(12px) 0;
      >span{
        color: #eb1f10;
      }

    }

  }
  .footer{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calculateRem(58px);
    background-image: linear-gradient(0deg, #F5F8FA 0%, rgba(245,248,250,0.00) 100%);
    box-sizing: border-box;
    padding: 0 calculateRem(10px);
    >a{
      display: inline-block;
      height: calculateRem(48px);
      line-height: calculateRem(46px);
      box-sizing: border-box;
      font-size: calculateRem(20px);
      text-align: center;
      /*font-weight: bold;*/
    }
    .no-agree{
      width: 38%;
      color: #EB1F10;
      border: 1px solid #818B91;
      border-radius: 5px;
      background: white;
      float: left;
      &:active{
        background: #fafafa;
      }

    }
    .agree{
      width: 60%;
      background: #f2b7b3;
      color: white;
      border: 1px solid #f2b7b3;
      border-radius: 5px;
      float: right;
      &:active{
        background: #efa5a0;
      };
    }
    .readed{
      background: #EB1F10;
      &:active{
        background: #C51B0D;
      };
    }
  }

}
</style>
